<template>
  <layout 
    tabbar="/pages/index/index" 
    navbar="none" 
    :showBack="false" 
    class="dark-theme"
    navbarBackgroundColor="#020303"
  >

    <view class="index-page">
	  <tn-nav-bar
	    fixed
	    alpha
	    backgroundColor="#020303"
	    :isBack="false"
	    fontColor="#FFFFFF">
	    <!-- 使用左侧槽位 -->
	    <view slot="left" class="custom-nav">
		  <view class="nav-tabs">
		    <view 
		      v-for="(tab, index) in tabs" 
		      :key="index"
		      class="nav-tab" 
		      :class="{'active': activeTab === tab.id}"
		      @tap="setActiveTab(tab.id)"
		    >
		      {{ tab.name }}
		    </view>
		  </view>
	    </view>
		<!-- <view slot="right" class="custom-nav">
		  <view class="header-actions">
		    <view class="search-container" :class="{'active': isSearchActive}">
		      <input type="text" class="search-input" placeholder="搜索用户、动态或内容" v-model="searchQuery">
		      <view class="search-btn" @tap="toggleSearch">
		        <text class="tn-icon-search"></text>
		      </view>
		    </view>
		  </view>
		</view> -->
	  </tn-nav-bar>
	  
      <!-- 使用z-paging代替原来的scroll-view实现分页 -->
      <z-paging 
        ref="paging" 
        v-model="posts" 
        @query="queryList"
        :default-page-size="20"
        :auto="true"
		:paging-style="{paddingTop: vuex_status_bar_height + 44 + 'px'}"
        :bg-color="'#020303'"
        :loading-more-enabled="true"
        :show-refresher-when-reload="true"
        :refresher-threshold="80"
        :refresher-default-text="'下拉刷新'"
        :refresher-pulling-text="'释放立即刷新'"
        :refresher-refreshing-text="'加载中...'"
        :loading-more-custom-style="{color: '#B3F73C'}"
        :show-loading-more-no-more-view="false"
        :hide-loading-more-when-no-more-and-inside-of-paging="true"
        :empty-view-text="'暂无动态'"
        :empty-view-reload-text="'点击刷新'"
        :show-empty-view-reload="true"
        :auto-show-back-to-top="false"
        :auto-clean-list-when-reload="true"
        :fixed="true"
        :safe-area-inset-bottom="true"
        :auto-height="true"
        :system-container-height="true"
        @scrolltolower="handleScrollToLower"
        @scrolltoupper="handleScrollToUpper"
        @scroll="handleScroll"
        @refresherRefresh="onRefresh"
      >
	   
        <template #bottom>
			<view style="height: 100rpx;"></view>
        </template>
        <view 
          v-for="(post, index) in posts" 
          :key="index"
          class="post"
        >
          <view class="post-header">
              <image 
                :src="post.avatar" 
              class="post-avatar"
                mode="aspectFill"
                @tap="goToUserProfile(post.userId)"
              ></image>
            <view class="post-user-info" @tap="goToUserProfile(post.userId)">
              <view class="post-username">
                <text :class="{'username-vip': post.isVip}">{{ post.username }}</text>
                <text :class="['gender-age', post.gender === 'male' ? 'gender-male' : 'gender-female']">
                  {{ post.gender === 'male' ? '♂' : '♀' }} {{ post.age }}
                </text>
                <view class="user-tags">
                  <text class="user-tag vip" v-if="post.isVip">
                    <text class="tn-icon-star"></text>
                    会员
                  </text>
                  <text class="user-tag verified" v-if="post.isVerified">
                    <text class="tn-icon-check"></text>
                    实名
                  </text>
                </view>
              </view>
              <view class="post-meta">
                <text>{{ post.time }}</text>
                <view class="location-tag" v-if="post.location">
                  <text class="tn-icon-location"></text>
                  {{ post.location }}
                </view>
              </view>
            </view>
            <view class="more-options-wrapper">
              <button class="icon-btn post-more-btn" @tap.stop="toggleMoreOptions(post.id)">
                <text class="tn-icon-more-horizontal"></text>
              </button>
              <!-- 遮罩层 -->
              <view class="mask" v-if="showOptionsMap[post.id]" @tap.stop="closeAllOptions"></view>
              <!-- 更多选项下拉菜单 -->
              <view class="more-options-dropdown" v-if="showOptionsMap[post.id]">
                <view class="option-item report" @tap.stop="reportPost(post)">
                  <text class="tn-icon-warning"></text>
                  <text>举报</text>
                </view>
                <view class="option-item delete" @tap.stop="deletePost(post)" v-if="isOwnPost(post)">
                  <text class="tn-icon-delete"></text>
                  <text>删除</text>
                </view>
              </view>
            </view>
          </view>
          
          <view class="post-content">
            <!-- 话题标签 -->
            <view class="post-topics-container" v-if="post.topics && post.topics.length">
              <text class="post-topic" v-for="(topic, topicIndex) in post.topics" :key="topicIndex" @tap="goToTopic(topic)">
                #{{topic}}
              </text>
            </view>
            <view class="post-text">{{post.content}}</view>
            
            <!-- 使用图片组件 -->
            <post-images 
              :images="post.images" 
              :unlock-button-text="post.unlockButtonText"
              :post-id="post.id"
              @unlock-image="unlockImage(post)"
              @unlock-all-images="unlockAllImages(post)"
              @image-dimensions-checked="handleImageDimensionsChecked"
              @image-error="handleImageError"
            />
          </view>
          
          <view class="post-actions">
            <view class="post-action" @tap="goToPostDetail(post.id)">
              <text class="tn-icon-message"></text>
              {{ post.commentCount }}
            </view>
            <view class="post-action" :class="{'liked': post.isLiked}" @tap="toggleLike(index)">
              <text class="tn-icon-like" :class="{'tn-icon-like-fill': post.isLiked}"></text>
              {{ post.likeCount }}
            </view>
            <view class="post-action">
              <text class="tn-icon-star"></text>
              收藏
            </view>
            <view class="post-action">
              <text class="tn-icon-share"></text>
              分享
            </view>
          </view>
        </view>
      </z-paging>
      
      <!-- 发布按钮 -->
      <view class="fab-button" @tap="goToPost" v-if="!showBackToTop">
        <text class="tn-icon-add"></text>
      </view>
      
      <!-- 自定义置顶按钮 -->
      <view class="back-to-top-button" :class="{'active': showBackToTop, 'clicking': isScrollingToTop}" @tap="scrollToTop" v-if="showBackToTop">
        <view class="rocket-icon">
          <view class="rocket-body"></view>
          <view class="window"></view>
          <view class="fin fin-left"></view>
          <view class="fin fin-right"></view>
          <view class="exhaust-flame"></view>
        </view>
        <view class="flight-path" v-if="isScrollingToTop">
          <view class="particle" v-for="i in 5" :key="i"></view>
        </view>
      </view>
      
      <!-- 添加滚动特效元素 -->
      <view class="scroll-effect" v-if="isScrollingToTop">
        <view class="star" v-for="i in 10" :key="i"></view>
      </view>
      
      <!-- 使用封装的举报弹窗组件 -->
      <report-popup 
        v-model="showReportPopup"
        :report-data="reportingPost"
        @submit="handleReportSubmit"
        @cancel="handleReportCancel"
      />
      
      <!-- 添加资料完善引导组件 -->
      <profile-guide 
        v-if="showProfileGuide"
        :completion-percentage="profileCompletionPercentage"
        :threshold="60"
        @edit="onStartProfileEdit"
        @skip="onSkipProfileGuide"
        @close="onCloseProfileGuide"
        @profileUpdated="onProfileUpdated"
      />
    </view>
  </layout>
</template>

<script>
import Layout from '@/components/layout/layout.vue';
import PostImages from '@/components/post/PostImages.vue';
import ReportPopup from '@/components/common/ReportPopup.vue';
import { checkLoginStatus, globalAutoLogin, checkProfileCompleteness } from '@/utils/auth.js';
import { mapState } from 'vuex';
import api from '@/api/index.js';
import ProfileGuide from '@/components/ProfileGuide.vue';

export default {
  components: {
    Layout,
    PostImages,
    ReportPopup,
    ProfileGuide
  },
  data() {
    return {
      isSearchActive: false,
      searchQuery: '',
      activeTab: 'recommend',
      
      // 添加当前用户ID
      currentUserId: 1, // 假设当前登录用户的ID是1
      
      // 举报相关数据
      showReportPopup: false,
      reportingPost: null,
      
      // 页面滚动状态
      showBackToTop: false,
      isScrollingToTop: false,  // 新增：是否正在滚动到顶部
      scrollTop: 0,
      scrollThreshold: 500, // 滚动多少距离后显示置顶按钮
      
      // 导航标签数据
      tabs: [
        { id: 'recommend', name: '推荐' },
        { id: 'following', name: '关注' },
        { id: 'nearby', name: '附近' }
      ],
      
      // 动态数据模板，用于模拟API返回（改为空数组，将通过API获取）
      postsData: [],
      
      // 存储转换后的帖子数据
      posts: [],
      showOptionsMap: {},
      
      // 资料引导相关数据
      showProfileGuide: false,
      profileCompletionPercentage: 0,
      isProfileCoreComplete: false,
      profileStatus: null
    }
  },
  computed: {
    ...mapState({
      isLoggedIn: state => state.user.isLogin,
      userInfo: state => state.user.userInfo
    })
  },
  onLoad() {
    // 检查登录状态
    this.checkUserLoginStatus();
  },
  onShow() {
    // 添加延迟，确保用户信息已加载
    setTimeout(() => {
      // 在onShow时也检查资料完整度，确保每次进入页面都会检查
      if (this.isLoggedIn && this.userInfo) {
        this.checkProfileStatus();
      }
    }, 500);
  },
  methods: {
    // 检查用户登录状态
    async checkUserLoginStatus() {
      try {
        const isLoggedIn = await checkLoginStatus();
        
        if (!isLoggedIn) {
          // #ifdef MP-WEIXIN
          await this.autoLogin();
          // #endif
        }
        
        // 检查资料完整度，决定是否显示引导
        this.checkProfileStatus();
      } catch (error) {
        console.error('检查登录状态失败:', error);
      }
    },
    
    // 自动登录
    async autoLogin() {
      try {
        // #ifdef MP-WEIXIN
        uni.showLoading({
          title: '登录中...',
          mask: true
        });
        
        // 使用全局登录方法，确保全局只有一个登录流程
        await globalAutoLogin();
        
        uni.hideLoading();
        console.log('首页全局自动登录成功');
        // #endif
      } catch (error) {
        uni.hideLoading();
        console.error('首页自动登录失败:', error);
      }
    },
    
    // z-paging相关方法
    async queryList(pageNo, pageSize) {
      console.log(`分页查询：第${pageNo}页，每页${pageSize}条`);
      
      try {
        // 构建查询参数
        const params = {
          pageNo,
          pageSize,
          sortType: 1 // 默认按最新排序
        };
        
        // 根据当前选择的标签添加不同的查询参数
        switch (this.activeTab) {
          case 'recommend':
            // 推荐标签，不需要特殊参数
            break;
          case 'following':
            // 关注标签，添加查询类型参数
            params.queryType = 'FOLLOW';
            break;
          case 'nearby':
            // 附近标签，添加查询类型参数
            params.queryType = 'NEARBY';
            // 如果有位置信息，添加经纬度
            if (this.location) {
              params.longitude = this.location.longitude;
              params.latitude = this.location.latitude;
            }
            break;
        }
        
        // 调用API获取动态列表
        const result = await api.feed.getPostPage(params);
        console.log('获取动态列表成功:', result);
        
        // 转换接口返回的数据为页面所需格式
        const pageData = this.convertPostData(result.list);
        
        // 更新数据到z-paging
        this.$refs.paging.complete(pageData);
      } catch (error) {
        console.error('获取动态列表失败:', error);
        // 加载失败时通知z-paging
        this.$refs.paging.complete(false);
        
        // 显示错误提示
        uni.showToast({
          title: '获取动态列表失败',
          icon: 'none'
        });
      }
    },
    
    // 将后端返回的数据转换为前端需要的格式
    convertPostData(postList) {
      if (!postList || postList.length === 0) {
        return [];
      }
      
      return postList.map(post => {
        // 处理媒体图片
        const images = post.medias ? post.medias.map(media => {
          return {
            url: media.url,
            thumbUrl: media.thumbUrl,
            alt: '动态图片',
            needUnlock: true, // 目前不考虑解锁逻辑，可以根据实际需求调整
            unlocked: media.unlocked,
            isPortrait: media.height > media.width,
            width: media.width,
            height: media.height
          };
        }) : [];
        
        // 处理话题标签
        const topics = post.topics ? post.topics.map(topic => topic.name) : [];
        
        // 转换时间格式（简单示例，可以根据需求使用更复杂的时间格式化）
        const createTime = post.createTime;
        let timeText = '刚刚';
        if (createTime) {
          // 简单的时间处理逻辑，可以根据需求完善
          const createDate = new Date(createTime);
          const now = new Date();
          const diff = (now - createDate) / 1000 / 60; // 分钟差
          
          if (diff < 1) {
            timeText = '刚刚';
          } else if (diff < 60) {
            timeText = Math.floor(diff) + '分钟前';
          } else if (diff < 24 * 60) {
            timeText = Math.floor(diff / 60) + '小时前';
          } else {
            timeText = Math.floor(diff / 60 / 24) + '天前';
          }
        }
        
        return {
          id: post.id,
          userId: post.userId,
          username: post.isAnonymous ? post.anonymousNickname : post.userNickname,
          avatar: post.isAnonymous ? post.anonymousAvatar : post.userAvatar,
          gender: 'male', // 后端数据可能需要补充性别信息
          age: 25, // 后端数据可能需要补充年龄信息
          isVerified: false, // 暂无此字段，可以根据实际情况补充
          isVip: false, // 暂无此字段，可以根据实际情况补充
          time: timeText,
          location: post.location,
          topics: topics,
          content: post.content,
          images: images,
          commentCount: post.commentCount || 0,
          likeCount: post.likeCount || 0,
          isLiked: post.isLiked || false
        };
      });
    },
    
    // 下拉刷新回调
    onRefresh() {
      console.log('下拉刷新触发');
      // 重置到第一页数据
      this.$refs.paging.reload();
    },
    
    // 其他业务方法
    toggleSearch() {
      this.isSearchActive = !this.isSearchActive;
      console.log('搜索状态切换:', this.isSearchActive);
    },
    
    setActiveTab(tabId) {
      this.activeTab = tabId;
      console.log(`切换到标签: ${tabId}`);
      // 切换标签时刷新数据
      this.$refs.paging.reload();
    },
    
    goToUserProfile(userId) {
      console.log(`前往用户主页: ${userId}`);
      uni.navigateTo({
        url: `/pages/mine/user-profile?id=${userId}`
      });
    },
    
    goToPostDetail(postId) {
      console.log(`前往动态详情: ${postId}`);
      uni.navigateTo({
        url: `/pages/index/post-detail?id=${postId}`
      });
    },
    
    goToPost() {
      // 路由跳转到发布页面
      uni.navigateTo({
        url: '/pages/post/create'
      });
    },
    
    // 修改toggleLike方法，使用新的点赞/取消点赞API
    async toggleLike(index) {
      const post = this.posts[index];
      
      try {
        if (post.isLiked) {
          // 已点赞，执行取消点赞
          await api.feed.unlike(1, post.id);
        } else {
          // 未点赞，执行点赞
          await api.feed.like(1, post.id);
        }
        
        // 更新本地状态
        post.isLiked = !post.isLiked;
        post.likeCount += post.isLiked ? 1 : -1;
        
        console.log(`点赞状态切换, 帖子ID: ${post.id}, 新状态: ${post.isLiked}`);
      } catch (error) {
        console.error('点赞操作失败:', error);
        
        // 显示错误提示
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        });
      }
    },
    
    unlockImage(post) {
	  // 使用map创建新数组，保持响应性
	  post.images = post.images.map(image => {
	    if (image.needUnlock) {
	      return { ...image, unlocked: true };
	    }
	    return image;
	  });
      // 解锁成功的提示
      uni.showToast({
        title: '解锁成功',
        icon: 'success',
        duration: 1500
      });
    },
    
    unlockAllImages(post) {
      console.log(`父组件 - 尝试解锁所有图片, 帖子ID: ${post.id}`);
      
      // 使用map创建新数组，保持响应性
      post.images = post.images.map(image => {
        if (image.needUnlock) {
          return { ...image, unlocked: true };
        }
        return image;
      });
      
      console.log(`父组件 - 解锁了帖子${post.id}的所有需要解锁的图片`);
      
      // 解锁成功的提示
      uni.showToast({
        title: '全部解锁成功',
        icon: 'success',
        duration: 1500
      });
    },
    
    hasLockedImages(post) {
      const result = post.images.some(image => image.needUnlock && !image.unlocked);
      console.log(`检查帖子${post.id}是否有需要解锁的图片: ${result}`);
      return result;
    },
    
    handleImageDimensionsChecked({ image, isPortrait }) {
      image.isPortrait = isPortrait;
      console.log(`检测到${isPortrait ? '竖向' : '横向'}图片`);
    },
    
    handleImageError(image) {
      console.error('图片加载错误:', image.url);
      // 可以在这里设置默认图片
      image.url = 'https://picsum.photos/seed/error/300/300';
    },
    
    goToTopic(topic) {
      console.log(`跳转到话题: ${topic}`);
    },
    
    toggleMoreOptions(postId) {
      // 先关闭所有其他选项
      this.showOptionsMap = {};
      // 切换当前帖子的选项
      this.$set(this.showOptionsMap, postId, !this.showOptionsMap[postId]);
    },
    
    closeAllOptions() {
      this.showOptionsMap = {};
    },
    
    isOwnPost(post) {
      // 如果用户已登录且有userInfo，则使用实际用户ID，否则返回false
      return this.userInfo && post.userId === this.userInfo.id;
    },
    
    reportPost(post) {
      console.log(`准备举报帖子: ${post.id}`);
      this.showOptionsMap = {};
      
      // 打开举报弹窗，设置举报对象
      this.reportingPost = {
        id: post.id,
        type: 'post'
      };
      this.showReportPopup = true;
    },
    
    handleReportSubmit(reportData) {
      console.log('提交举报数据:', reportData);
      
      // 显示举报成功提示
      uni.showToast({
        title: '举报成功',
        icon: 'success',
        duration: 1500
      });
    },
    
    handleReportCancel() {
      console.log('取消举报');
      this.reportingPost = null;
    },
    
    // 修改deletePost方法，对接后端API
    deletePost(post) {
      console.log(`删除帖子: ${post.id}`);
      this.showOptionsMap = {};
      
      // 显示确认对话框
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条动态吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 调用后端API删除帖子
              await api.feed.deletePost(post.id);
              
              // 在本地数据中删除帖子
              const index = this.posts.findIndex(item => item.id === post.id);
              if (index !== -1) {
                this.posts.splice(index, 1);
              }
              
              // 显示删除成功提示
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1500
              });
            } catch (error) {
              console.error('删除帖子失败:', error);
              
              // 显示错误提示
              uni.showToast({
                title: '删除失败，请重试',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    handleScrollToLower() {
      console.log('滚动到底部');
      // 实现滚动到底部的逻辑
    },
    
    handleScrollToUpper() {
      console.log('滚动到顶部');
      this.showBackToTop = false;
    },
    
    handleScroll(e) {
      // 获取滚动距离
      this.scrollTop = e.detail.scrollTop;
      
      // 根据滚动距离控制置顶按钮显示/隐藏
      if (this.scrollTop > this.scrollThreshold && !this.showBackToTop) {
        this.showBackToTop = true;
      } else if (this.scrollTop <= this.scrollThreshold && this.showBackToTop) {
        this.showBackToTop = false;
      }
    },
    
    // 滚动到顶部（带有动画效果）
    scrollToTop() {
      if (this.isScrollingToTop) return;
      
      // 设置正在滚动状态，触发动画效果
      this.isScrollingToTop = true;
      
      // 延迟执行滚动操作，让火箭动画有时间展示
      setTimeout(() => {
        // 使用z-paging自带的scrollToTop方法，带动画效果
        this.$refs.paging.scrollToTop(true);
        
        // 设置动画效果完成后的状态重置
        setTimeout(() => {
          this.isScrollingToTop = false;
          this.showBackToTop = false;
        }, 500);
      }, 800); // 延迟800毫秒，让火箭动画有足够时间显示
    },
    
    // 检查用户资料完整度
    checkProfileStatus() {
      try {
        if (this.isLoggedIn && this.userInfo) {
          // 使用工具函数检查资料完整度
          const profileStatus = checkProfileCompleteness(this.userInfo);
          
          // 保存检查结果
          this.profileStatus = profileStatus;
          this.profileCompletionPercentage = profileStatus.completionPercentage;
          this.isProfileCoreComplete = profileStatus.isCoreComplete;
          
          // 如果资料完整度低于阈值，显示资料完善引导
          if (!profileStatus.isCoreComplete) {
            // 显示强制引导
            this.showProfileGuide = true;
          } else if (profileStatus.completionPercentage < 70) {
            // 检查是否在24小时内跳过过
            const skippedTime = uni.getStorageSync('profile_guide_skipped');
            const now = Date.now();
            
            // 如果没有跳过记录，或者跳过已超过24小时，则显示引导
            if (!skippedTime || (now - skippedTime > 24 * 60 * 60 * 1000)) {
              this.showProfileGuide = true;
            }
          }
        }
      } catch (error) {
        console.error('检查资料完整度失败:', error);
      }
    },
    
    // 开始编辑资料（不跳转页面，直接显示弹窗）
    onStartProfileEdit() {
      // 弹窗由ProfileGuide组件内部处理，不需要额外操作
      console.log('开始编辑基础资料');
    },
    
    // 资料更新成功
    onProfileUpdated() {
      console.log('资料更新成功，重新获取用户信息');
      
      // 获取最新的用户信息
      this.$store.dispatch('user/getUserInfo').then(() => {
        // 重新检查资料完整度
        this.checkProfileStatus();
        
        // 刷新页面数据
        this.$refs.paging.reload();
      });
    },
    
    // 跳过资料完善引导
    onSkipProfileGuide() {
      this.showProfileGuide = false;
      // 记录跳过时间，24小时内不再提示
      uni.setStorageSync('profile_guide_skipped', Date.now());
    },
    
    // 关闭资料完善引导
    onCloseProfileGuide() {
      this.showProfileGuide = false;
    }
  },
  mounted() {
    // 添加: 延迟检查资料完整度，确保数据已加载
    setTimeout(() => {
      if (this.isLoggedIn && this.userInfo) {
        this.checkProfileStatus();
      }
    }, 2000);
  }
}
</script>

<style lang="scss" scoped>
.index-page {
  background-color: #020303;
  
  .post {
    margin: 40rpx 32rpx;
    padding: 32rpx 0;
    background-color: #050505;
    border-radius: 32rpx;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
    overflow: hidden;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
    }
    
    .post-header {
      display: flex;
      align-items: center;
      padding: 0 32rpx 24rpx;
      
      .post-avatar {
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;
        margin-right: 24rpx;
        border: 4rpx solid #0b0b0b;
        object-fit: cover;
      }
      
      .post-user-info {
        flex: 1;
        
        .post-username {
          font-size: 30rpx;
          font-weight: 600;
          margin-bottom: 4rpx;
          display: flex;
          align-items: center;
          color: #ffffff;
          
          .username-vip {
            background: linear-gradient(45deg, #8eac21, #B3F73C);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 5px rgba(179, 247, 60, 0.3);
            animation: gradient-animation 3s ease infinite;
            font-weight: 700;
          }
          
          .gender-age {
            display: flex;
            align-items: center;
            margin-left: 12rpx;
            font-size: 24rpx;
            line-height: 1;
          }
          
          .gender-male {
            color: #74b9ff;
          }
          
          .gender-female {
            color: #ff7675;
          }
          
          .user-tags {
            display: flex;
            align-items: center;
            margin-left: 16rpx;
            gap: 12rpx;
          }
          
          .user-tag {
            display: flex;
            align-items: center;
            padding: 2rpx 12rpx;
            border-radius: 20rpx;
            font-size: 20rpx;
            font-weight: 500;
            color: #fff;
            
            .tn-icon {
              margin-right: 4rpx;
            }
          }
          
          .user-tag.vip {
            background-color: #8eac21;
          }
          
          .user-tag.verified {
            background-color: #B3F73C;
            color: #050505;
          }
        }
        
        .post-meta {
          font-size: 26rpx;
          color: #888;
          display: flex;
          align-items: center;
          
          .location-tag {
            display: flex;
            align-items: center;
            margin-left: 16rpx;
            color: #B3F73C;
            font-size: 24rpx;
            
            .tn-icon-location {
              margin-right: 6rpx;
            }
          }
        }
      }
      
      .more-options-wrapper {
        position: relative;
      }
      
      .post-more-btn {
        padding: 16rpx;
        margin: -16rpx;
        background: none;
        border: none;
        color: #e0e0e0;
      }
    }
    
    .post-content {
      padding: 0 32rpx;
      
      .post-topics-container {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 16rpx;
      }
      
      .post-topic {
        display: inline-flex;
        align-items: center;
        color: #B3F73C;
        background-color: rgba(179, 247, 60, 0.08);
        padding: 6rpx 16rpx;
        border-radius: 24rpx;
        margin-right: 16rpx;
        margin-bottom: 12rpx;
        font-size: 28rpx;
        font-weight: 500;
        transition: all 0.2s ease;
      }
      
      .post-text {
        margin-bottom: 24rpx;
        font-size: 30rpx;
        line-height: 1.5;
        color: #e0e0e0;
      }
    }
    
    .post-actions {
      display: flex;
      padding: 16rpx 32rpx 0;
      margin-top: 12rpx;
      justify-content: space-between;
      position: relative;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 32rpx;
        right: 32rpx;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.05), transparent);
      }
      
      .post-action {
        display: flex;
        align-items: center;
        color: #888;
        font-size: 26rpx;
        
        .tn-icon-like, .tn-icon-message, .tn-icon-star, .tn-icon-share {
          margin-right: 12rpx;
          font-size: 32rpx;
        }
      }
      
      .post-action.liked {
        color: #B3F73C;
      }
    }
  }
  
  .fab-button {
    position: fixed;
    right: 40rpx;
    bottom: 200rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #8eac21, #B3F73C);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(179, 247, 60, 0.25);
    z-index: 100;  /* 确保按钮位于z-paging上方 */
    
    .tn-icon-add {
      color: #050505;
      font-size: 48rpx;
    }
  }
  
  .back-to-top-button {
    position: fixed;
    right: 40rpx;
    bottom: 200rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #8eac21, #B3F73C);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(179, 247, 60, 0.25), 0 0 30rpx rgba(179, 247, 60, 0.2);
    z-index: 100;  /* 确保按钮位于z-paging上方 */
    animation: float 2s infinite ease-in-out;
    transform-origin: center;
    opacity: 0;
    transform: scale(0) translateY(20rpx);
    transition: opacity 0.3s, transform 0.3s;
    
    &.active {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    
    &.clicking {
      animation: rocket-launch 0.5s forwards;
    }
    
    &:active {
      transform: scale(0.9);
      transition: transform 0.2s;
    }
    
    .rocket-icon {
      position: relative;
      width: 40rpx;
      height: 60rpx;
      
      .rocket-body {
        position: absolute;
        top: 0;
        left: 5rpx;
        width: 30rpx;
        height: 45rpx;
        background-color: #050505;
        border-radius: 50% 50% 20% 20%;
      }
      
      .window {
        position: absolute;
        top: 10rpx;
        left: 15rpx;
        width: 10rpx;
        height: 10rpx;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 5rpx #b3f73c;
      }
      
      .fin {
        position: absolute;
        width: 15rpx;
        height: 15rpx;
        background-color: #050505;
      }
      
      .fin-left {
        top: 25rpx;
        left: -3rpx;
        transform: skew(30deg, 0);
        border-radius: 0 0 0 10rpx;
      }
      
      .fin-right {
        top: 25rpx;
        right: -3rpx;
        transform: skew(-30deg, 0);
        border-radius: 0 0 10rpx 0;
      }
      
      .exhaust-flame {
        position: absolute;
        bottom: -15rpx;
        left: 12rpx;
        width: 16rpx;
        height: 25rpx;
        background: linear-gradient(to bottom, #ff9500, transparent);
        border-radius: 50% 50% 20% 20%;
        animation: flame 0.5s infinite alternate;
      }
    }
    
    .flight-path {
      position: absolute;
      width: 40rpx;
      height: 80rpx;
      bottom: -10rpx;
      z-index: -1;
      
      .particle {
        position: absolute;
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background: #ff9500;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        
        &:nth-child(1) {
          bottom: 10rpx;
          animation: particle-fall 0.6s 0.1s infinite;
        }
        
        &:nth-child(2) {
          bottom: 15rpx;
          animation: particle-fall 0.5s 0s infinite;
        }
        
        &:nth-child(3) {
          bottom: 20rpx;
          animation: particle-fall 0.7s 0.2s infinite;
        }
        
        &:nth-child(4) {
          bottom: 25rpx;
          animation: particle-fall 0.4s 0.15s infinite;
        }
        
        &:nth-child(5) {
          bottom: 30rpx;
          animation: particle-fall 0.6s 0.05s infinite;
        }
      }
    }
  }
}

.custom-nav {
  padding: 0 30rpx;
  background-color: #020303;
  
  .nav-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60rpx;
  }
  
  .nav-tab {
    font-size: 32rpx;
    font-weight: 600;
    padding: 10rpx 0;
    position: relative;
    color: #888;
    transition: color 0.3s;
  }
  
  .nav-tab.active {
    color: #B3F73C;
  }
  
  .nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: -4rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 6rpx;
    background-color: #B3F73C;
    border-radius: 6rpx;
  }
  
  .header-actions {
    display: flex;
    gap: 40rpx;
    align-items: center;
  }
  
  .search-container {
    position: relative;
    overflow: visible;
    width: 72rpx;
    transition: width 0.3s ease;
    
    &.active {
      width: 400rpx;
    }
    
    .search-input {
      position: relative;
      top: 0;
      right: 0;
      width: 100%;
      height: 72rpx;
      border-radius: 36rpx;
      background-color: #070707;
      border: none;
      padding: 0 80rpx 0 32rpx;
      color: #e0e0e0;
      font-size: 28rpx;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    &.active .search-input {
      opacity: 1;
    }
    
    .search-btn {
      position: absolute;
      z-index: 10;
      background-color: #0f0f0f;
      border: none;
      width: 72rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e0e0e0;
      border-radius: 50%;
	  right: 0;
	  top: 0;
      box-shadow: 0 4rpx 10rpx rgba(0,0,0,0.2);
    }
  }
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.more-options-wrapper {
  position: relative;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: transparent;
}

.more-options-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 220rpx;
  background-color: #1a1a1a;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
  z-index: 100;
  overflow: hidden;
  animation: dropdown-fade 0.2s ease;
}

@keyframes dropdown-fade {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.option-item {
  display: flex;
  align-items: center;
  padding: 24rpx 28rpx;
  font-size: 28rpx;
  transition: background-color 0.2s;
  
  text {
    margin-left: 16rpx;
  }
  
  &:active {
    background-color: #222222;
  }
}

.option-item.report {
  color: #e0e0e0;
  
  .tn-icon-warning {
    color: #fcbb5e;
  }
}

.option-item.delete {
  color: #ff6b6b;
  
  .tn-icon-delete {
    color: #ff6b6b;
  }
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8rpx) rotate(2deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes flame {
  0% {
    height: 25rpx;
    opacity: 0.8;
  }
  100% {
    height: 35rpx;
    opacity: 1;
  }
}

@keyframes rocket-launch {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(0.5) translateY(-200rpx);
  }
}

.scroll-effect {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99;
  
  .star {
    position: absolute;
    width: 10rpx;
    height: 10rpx;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    
    &:nth-child(1) {
      left: 10vw;
      top: 100vh;
      animation: star-fall 0.6s 0.1s linear forwards;
    }
    
    &:nth-child(2) {
      left: 25vw;
      top: 100vh;
      animation: star-fall 0.7s 0.2s linear forwards;
    }
    
    &:nth-child(3) {
      left: 40vw;
      top: 100vh;
      animation: star-fall 0.5s 0.15s linear forwards;
    }
    
    &:nth-child(4) {
      left: 55vw;
      top: 100vh;
      animation: star-fall 0.8s 0.05s linear forwards;
    }
    
    &:nth-child(5) {
      left: 70vw;
      top: 100vh;
      animation: star-fall 0.6s 0.25s linear forwards;
    }
    
    &:nth-child(6) {
      left: 85vw;
      top: 100vh;
      animation: star-fall 0.7s 0.1s linear forwards;
    }
    
    &:nth-child(7) {
      left: 20vw;
      top: 100vh;
      animation: star-fall 0.5s 0.3s linear forwards;
    }
    
    &:nth-child(8) {
      left: 35vw;
      top: 100vh;
      animation: star-fall 0.9s 0.2s linear forwards;
    }
    
    &:nth-child(9) {
      left: 50vw;
      top: 100vh;
      animation: star-fall 0.6s 0.1s linear forwards;
    }
    
    &:nth-child(10) {
      left: 65vw;
      top: 100vh;
      animation: star-fall 0.7s 0.25s linear forwards;
    }
  }
}

@keyframes star-fall {
  0% {
    opacity: 0;
    top: 100vh;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: -10rpx;
  }
}

@keyframes particle-fall {
  0% {
    transform: translateX(-50%) translateY(-10rpx) scale(0.8);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(40rpx) scale(0.2);
    opacity: 0;
  }
}
</style>